Best Practices for Script Combining
Many Web sites that use client script load many separate JavaScript files in order to support a page. By combining those scripts into a single script, you can reduce download time by reducing the number of files that must be downloaded, which also reduces the number of round trips to the Web server. The ASP.NET ScriptManager control automates script combining. This enables you to develop scripts as separate modules but still easily take advantage of script combining.
However, many variables determine Web site performance, and using ScriptManager to combine scripts might not always be the correct strategy. This topic offers suggestions for how to make the best use of script combining.
Measure Performance With and Without Script Combining
Measure the performance of Web pages with and without script combining, and with different parameters and network configurations. To make the measurements, you can use many performance tools, such as Visual Studio Profiler, Fiddler, and Firebug. Visual Studio Profiler is a commercial profiler that helps diagnose performance problems in .NET Framework-based applications, which includes ASP.NET Web applications. Visual Studio Profiler is available in the Visual Studio Team System suite. For information about how to use the Visual Studio Profiler with an ASP.NET Web site, see How to: Use CLR Profiler on the Microsoft Patterns and Practices Web site. Fiddler is a free tool that enables you to inspect HTTP traffic, set breakpoints, and edit incoming and outgoing data between your computer and the Internet. For more information, see the Fiddler PowerToy page on the MSDN Web site. Firebug is a debugging add-on for the Mozilla Firefox Web browser.
Do Not Include Path-Based Scripts in the Combination
The ScriptManager control enables you to specify the scripts that you want to combine by using either path-based or assembly-based script references. A path-based script reference specifies a script by using the location of the script in the Web site folder structure. An assembly-based script reference specifies a script that is based on the name of the assembly that the script was compiled into.
The ScriptManager control is more efficient at combining assembly-based scripts than it is at combining path-based scripts. Therefore, we suggest that if you are using path-based scripts, you combine them manually.
Do Not Combine Too Much
Combining scripts is a balance between download performance and cache performance (memory use). Download performance is the time that is required in order to download a script from the server. Cache performance is determined by how long the browser stores the script on the client, and the amount of memory that the cache requires.
Imagine a Web site that has pages named PageA.aspx and PageB.aspx. PageA.aspx references three scripts: Script1.js, Script2.js, and Script3.js. PageB.aspx references Script1.js, Script2.js, and Script4.js. The following list shows some of the possible script combinations that you can use:
Create a combined script that includes Script1.js, script2.js, and Script3.js. When the user requests PageA.aspx, the first three scripts are downloaded and cached. When the user requests PageB.aspx, Script1.js and Script2.js are downloaded again, because they are combined with Script4.js, which is needed by PageB.aspx.
Create a combined script that includes Script1.js and Script2.js. If the user requests PageA.aspx, the combined script and Script3.js are downloaded and cached. If the user then requests PageB.aspx, only Script4.js is downloaded. This causes just one extra download each for PageA.aspx and PageB.aspx.
Create a combined script that contains all four scripts. When a user requests PageA.aspx, all scripts are loaded. When a user requests PageB.aspx, PageB.aspx does not have to download any scripts, because they are already cached. However, if most users request PageA.aspx but never request PageB.aspx, the first request downloads more scripts than are required, which uses cache space unnecessarily.
Any of these solutions might be right for a given Web site, depending on the Web-site design and on the traffic patterns for the site.
Other Ways to Improve Web Site Performance
Script combining is one of several ways to improve the performance of a Web site. Other performance boosters include the following:
Combine multiple cascading style sheets (CSS) into a single style sheet.
Remove unnecessary whitespace in scripts. Tools are available that can perform this task, which is sometimes referred to as crunching or minifying scripts. Some of the tools available include the following: JSMin (JavaScript Minifier), JSO (JavaScript Optimizer), DigitalOverload JavaScript Minifier, JSCompress.com, and CSS Compressor.
Remove duplicate scripts.
Use a content-delivery network. A content-delivery network is a collection of Web servers that is spread across multiple locations so that content can be moved physically closer to the user.
Add an Expires header to HTTP responses.
Use HTTP compression.
Avoid redirects.
For more information about performance improvements, see the book High Performance Web Sites by Steve Souders.